<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />

			<cl-filter label="分类">
				<cl-select tree :options="options.type" prop="typeId" all-levels-id :width="140" />
			</cl-filter>

			<cl-filter label="状态">
				<cl-select :options="options.status" prop="status" :width="140" />
			</cl-filter>

			<cl-filter label="属性">
				<cl-select
					:options="[
						{ label: '普通药品', value: 0 },
						{ label: '新品上市', value: 1 },
						{ label: '热销药品', value: 2 },
						{ label: '推荐药品', value: 3 },
						{ label: '特价药品', value: 4 },
						{ label: '畅销药品', value: 5 },
						{ label: '精品药品', value: 6 },
						{ label: '优选药品', value: 7 },
						{ label: '限购药品', value: 8 }
					]"
					prop="attribute"
					multiple
					:width="200"
					placeholder="请选择药品属性"
				/>
			</cl-filter>

			<cl-flex1 />

			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索标题" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />

		<!-- 商品规格 -->
		<goods-spec :ref="setRefs('goodsSpec')" />
	</cl-crud>
</template>

<script lang="ts" name="goods-info" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { router, useCool } from '/@/cool';
import { computed, onActivated, reactive } from 'vue';
import { deepTree } from '/@/cool/utils';
import type { Dict } from '/$/dict/types';
import GoodsSpec from '../components/spec.vue';

const { service, refs, setRefs } = useCool();

const options = reactive({
	type: [] as Dict.Item[],
	status: [
		{
			label: '已上架',
			value: 1
		},
		{
			label: '已下架',
			value: 0
		}
	]
});

// cl-upsert
const Upsert = useUpsert({
	dialog: {
		width: '1000px'
	},
	items: [
		// 分组标签
		{
			type: 'tabs',
			props: {
				labels: [
					{
						label: '基本信息',
						value: 'base'
					},
					{
						label: '商品介绍',
						value: 'detail'
					},
					{
						label: 'Oracle信息',
						value: 'oracle'
					}
				]
			}
		},

		// 基本信息组
		{
			group: 'base',
			label: '分类',
			prop: 'typeId',
			span: 12,
			component: {
				name: 'cl-select',
				props: {
					options: computed(() => options.type),
					tree: true
				}
			},
			required: true
		},

		{
			group: 'base',
			label: '标题',
			prop: 'title',
			span: 12,
			component: {
				name: 'el-input',
				props: {
					clearable: true
				}
			},
			required: true
		},

		{
			group: 'base',
			label: '副标题',
			prop: 'subTitle',
			component: {
				name: 'el-input',
				props: {
					clearable: true,
					type: 'textarea',
					rows: 3
				}
			}
		},

		{
			group: 'base',
			label: '主图',
			prop: 'mainPic',
			span: 12,
			component: {
				name: 'cl-upload'
			}
		},

		{
			group: 'base',
			label: '示例图',
			prop: 'pics',
			span: 12,
			component: {
				name: 'cl-upload',
				props: {
					multiple: true,
					draggable: true
				}
			}
		},

		{
			group: 'base',
			label: '价格',
			prop: 'price',
			hook: 'number',
			span: 8,
			component: {
				name: 'el-input-number',
				props: {
					min: 0.01,
					max: 1000000,
					precision: 2
				}
			},
			required: true
		},

		{
			group: 'base',
			label: '已售',
			prop: 'sold',
			hook: 'number',
			span: 8,
			component: {
				name: 'el-input-number',
				props: {
					min: 0,
					max: 1000000
				}
			},
			required: true
		},

		{
			group: 'base',
			label: '库存',
			prop: 'storNum',
			hook: 'number',
			span: 8,
			component: {
				name: 'el-input-number',
				props: {
					min: 0
				}
			}
		},

		{
			group: 'base',
			label: '排序',
			prop: 'sortNum',
			hook: 'number',
			span: 12,
			component: {
				name: 'el-input-number'
			}
		},

		{
			group: 'base',
			label: '状态',
			prop: 'status',
			flex: false,
			span: 12,
			value: 1,
			component: {
				name: 'cl-switch'
			},
			required: true
		},

		{
			group: 'base',
			label: '属性',
			prop: 'attribute',
			value: [],
			hook: {
				bind: ['split', 'number'],
				submit: 'join'
			},
			component: {
				name: 'el-checkbox-group',
				props: {
					class: 'cl-checkbox-group__block'
				},
				options: [
					{ label: '普通药品', value: 0 },
					{ label: '新品上市', value: 1 },
					{ label: '热销药品', value: 2 },
					{ label: '推荐药品', value: 3 },
					{ label: '特价药品', value: 4 },
					{ label: '畅销药品', value: 5 },
					{ label: '精品药品', value: 6 },
					{ label: '优选药品', value: 7 },
					{ label: '限购药品', value: 8 }
				]
			}
		},

		// 商品介绍组
		{
			group: 'detail',
			prop: 'content',
			component: {
				name: 'cl-editor-wang'
			}
		},

		// Oracle信息组
		{
			group: 'oracle',
			label: '商品ID',
			prop: 'goodsId',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '企业ID',
			prop: 'entId',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '商品编码',
			prop: 'goodsCode',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '商品名称',
			prop: 'oracleGoodsName',
			span: 12,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '商品规格',
			prop: 'goodsSpec',
			span: 12,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '生产厂家',
			prop: 'manufacturer',
			span: 12,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '单位',
			prop: 'unit',
			span: 12,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '批准文号',
			prop: 'approvalNo',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '剂型',
			prop: 'formula',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '中包装',
			prop: 'midpack',
			span: 8,
			hook: 'number',
			component: {
				name: 'el-input-number'
			}
		},

		{
			group: 'oracle',
			label: '数量',
			prop: 'qty',
			span: 8,
			hook: 'number',
			component: {
				name: 'el-input-number',
				props: {
					precision: 2
				}
			}
		},

		{
			group: 'oracle',
			label: '计划类别',
			prop: 'planCate',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '助记码',
			prop: 'logogram',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '整件限制数量',
			prop: 'wholLimtNum',
			span: 8,
			hook: 'number',
			component: {
				name: 'el-input-number'
			}
		},

		{
			group: 'oracle',
			label: '允许拆零销售',
			prop: 'isMidpackSaleDisabled',
			span: 8,
			value: 1,
			component: {
				name: 'el-radio-group',
				options: [
					{ label: '是', value: 0 },
					{ label: '否', value: 1 }
				]
			}
		},

		{
			group: 'oracle',
			label: '商品分类(G)',
			prop: 'gCategory',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '质量分类(Q)',
			prop: 'qCategory',
			span: 8,
			component: {
				name: 'el-input'
			}
		},

		{
			group: 'oracle',
			label: '是否隐藏',
			prop: 'oracleIsHidden',
			span: 12,
			value: 0,
			component: {
				name: 'el-radio-group',
				options: [
					{ label: '否', value: 0 },
					{ label: '是', value: 1 }
				]
			}
		},

		{
			group: 'oracle',
			label: '是否处方药',
			prop: 'isPres',
			span: 12,
			component: {
				name: 'el-radio-group',
				options: [
					{ label: '否', value: 0 },
					{ label: '是', value: 1 }
				]
			}
		}
	],
	async onSubmit(data, { next }) {
		const info = await next(data);

		// 新增后弹出规格添加
		if (Upsert.value?.mode == 'add') {
			refs.goodsSpec.openById(info.id);
		}
	}
});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: '分类', prop: 'typeId', minWidth: 160, dict: computed(() => options.type) },
		{ label: '标题', prop: 'title', minWidth: 240 },
		{
			label: '主图',
			prop: 'mainPic',
			minWidth: 100,
			component: { name: 'cl-image', props: { size: 50 } }
		},

		{ label: '价格', prop: 'price', minWidth: 100, sortable: 'custom' },
		{ label: '已售', prop: 'sold', minWidth: 100, sortable: 'custom' },
		{ label: '库存', prop: 'storNum', minWidth: 100, sortable: 'custom' },
		{
			label: '属性',
			prop: 'attribute',
			minWidth: 150,
			dict: [
				{ label: '普通药品', value: 0 },
				{ label: '新品上市', value: 1 },
				{ label: '热销药品', value: 2 },
				{ label: '推荐药品', value: 3 },
				{ label: '特价药品', value: 4 },
				{ label: '畅销药品', value: 5 },
				{ label: '精品药品', value: 6 },
				{ label: '优选药品', value: 7 },
				{ label: '限购药品', value: 8 }
			],
			formatter(row) {
				if (!row.attribute) {
					return '-';
				}
				const attrs = String(row.attribute).split(',').map(Number);
				const dict = [
					{ label: '普通药品', value: 0 },
					{ label: '新品上市', value: 1 },
					{ label: '热销药品', value: 2 },
					{ label: '推荐药品', value: 3 },
					{ label: '特价药品', value: 4 },
					{ label: '畅销药品', value: 5 },
					{ label: '精品药品', value: 6 },
					{ label: '优选药品', value: 7 },
					{ label: '限购药品', value: 8 }
				];
				return attrs
					.map(v => {
						const item = dict.find(d => d.value === v);
						return item?.label || '';
					})
					.filter(Boolean)
					.join('、');
			}
		},
		{ label: '状态', prop: 'status', minWidth: 100, component: { name: 'cl-switch' } },
		{ label: '排序', prop: 'sortNum', minWidth: 100, sortable: 'desc' },
		{ label: '商品编码', prop: 'goodsCode', minWidth: 120 },
		{ label: '商品规格', prop: 'goodsSpec', minWidth: 120 },
		{ label: '生产厂家', prop: 'manufacturer', minWidth: 160 },
		{ label: '单位', prop: 'unit', minWidth: 80 },
		{ label: '批准文号', prop: 'approvalNo', minWidth: 120 },
		{ label: '剂型', prop: 'formula', minWidth: 100 },
		{
			label: '拆零销售',
			prop: 'isMidpackSaleDisabled',
			minWidth: 100,
			dict: [
				{ label: '是', value: 0 },
				{ label: '否', value: 1 }
			]
		},
		{
			label: '是否处方药',
			prop: 'isPres',
			minWidth: 100,
			dict: [
				{ label: '否', value: 0 },
				{ label: '是', value: 1 }
			]
		},
		{ label: '创建时间', prop: 'createTime', minWidth: 160, sortable: 'custom' },
		{
			label: '更新时间',
			prop: 'updateTime',
			minWidth: 160,
			sortable: 'custom'
		},
		{
			type: 'op',
			width: 300,
			buttons({ scope }) {
				return [
					'edit',
					'delete',
					// {
					// 	label: '规格',
					// 	onClick() {
					// 		refs.goodsSpec.open(scope.row);
					// 	}
					// },
					{
						label: '评论',
						onClick() {
							router.push({
								path: '/goods/comment',
								query: {
									id: scope.row.id,
									title: scope.row.title
								}
							});
						}
					}
				];
			}
		}
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.goods.info
	},
	app => {
		app.refresh();
	}
);

// 获取分类
function getTypes() {
	service.goods.type.list().then(res => {
		res.forEach(e => {
			e.label = e.name;
			e.value = e.id;
		});

		options.type = deepTree(res);
	});
}

onActivated(() => {
	getTypes();
});
</script>
